/**
 * 扩展样式的日期组件
 */
import React, { Component } from "react";
import { DatePicker, Tag } from "antd";
import "styles/components/expand-date-picker.scss";

const RangePicker = DatePicker.RangePicker;

class ExpandDatePicker extends Component {
  getColor = (key) => {
    const colorMap = new Map([
      ["Red", "#FA6478"],
      ["Green", "#32CD91"],
      ["Yellow", "#F0CE74"],
      ["Gray", "#BEC8D2"],
      ["Blue", "#63AEFF"],
    ]);
    return colorMap.get(key) || "#63AEFF";
  };

  renderMark = (markInfo = {}) => {
    const { colorCode, mark } = markInfo;
    if (colorCode && mark) {
      return <Tag color={this.getColor(colorCode)}>{mark}</Tag>;
    }
    if (colorCode) {
      return <div className="expand-date-picker-mark-badge" style={{ background: this.getColor(colorCode) }}></div>;
    }
    if (mark) {
      return <div className="expand-date-picker-mark-text">{mark}</div>;
    }
    return null;
  };

  renderDateRender = (current) => {
    const { markList } = this.props;
    const markInfo = markList.filter((item) => item.date === current.format("YYYY-MM-DD"))[0];
    return (
      <div className="expand-date-picker-date">
        <div className="ant-calendar-date">{current.date()}</div>
        <div className="expand-date-picker-mark">{this.renderMark(markInfo)}</div>
      </div>
    );
  };

  render() {
    const { dateParams, isRangePicker, markVisible } = this.props;
    // expand-date-picker-container只是日历组件的容器，不设置样式
    return (
      <div
        className={
          markVisible
            ? this.classNames([
                {
                  "expand-date-picker-container": true,
                  "expand-date-picker": true,
                  "expand-range-picker": isRangePicker,
                  "expand-date-picker-withTime": dateParams.showTime,
                  "expand-range-picker-withTime": dateParams.showTime,
                },
              ])
            : "expand-date-picker-container"
        }
      >
        {React.createElement(
          isRangePicker ? RangePicker : DatePicker,
          Object.assign({}, dateParams, {
            getCalendarContainer: () => document.getElementsByClassName("expand-date-picker-container")[0],
            dateRender: this.renderDateRender,
          })
        )}
      </div>
    );
  }
}

ExpandDatePicker.PropTypes = {
  isRangePicker: React.PropTypes.bool, // DatePicker Or RangePicker
  dateParams: React.PropTypes.object, // 日期组件官方属性
  markList: React.PropTypes.array, // 标记列表
  markVisible: React.PropTypes.bool, // 是否支持显示标记
};

ExpandDatePicker.defaultProps = {
  isRangePicker: false,
  dateParams: {},
  markList: [],
  markVisible: true,
};

export default ExpandDatePicker;
